// Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、
// 渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。
// 通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
// 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，
// 可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。
var vue = new Vue({
    el: "#demodiv",
    data: {
        url: "http://127.0.0.1:8080/lx/",
        dataList: [],
        headtitle: "",
        id:"",
        name: "",
        account: "",
        citID: "",
        sex: "1",
        role: "1",
        email: "",
        mobile: "",
        dep: "",
        useMark: "1",

        depList: [],
    },
    // 自定义过滤器
    filters: {
        //时间过滤器
        dateFilter: function (value) {
            if (value) {
                var value = new Date(value);
                return value.format('yyyy-MM-dd');
            }
            return value;
        }
        // 其他的...
    },
    methods: {
        // 初始化数据
        init: function () {
            var _this = this;
            _this.id="";
            _this.name = "";
            _this.account = "";
            _this.citID = "";
            _this.sex = "1";
            _this.role = "1";
            _this.email = "";
            _this.mobile = "";
            _this.dep = "";
            _this.useMark = "1";
        },
        // 获取用户列表
        getList: function () {
            var _this = this;
            $.ajax({
                url: this.url + "findAllByIfDelete",
                type: "get",
                dataType: "Json",
            }).success(function (v) {
                // console.log(v);
                if (v.code === 0) {
                    _this.dataList = v.data;
                }
            })
        },
        // 删除操作
        del: function (id) {
            var _this = this;
            var cf = confirm("是否删除?");
            if (cf) {
                $.ajax({
                    url: this.url + "delUser",
                    type: "post",   // 方法类型
                    contentType: 'application/json;charset=UTF-8', //请求头
                    data: JSON.stringify({id: id})  //json转为json字符串
                }).success(function (v) {
                    if (v.code === 0) {
                        // console.log(v);
                        _this.getList();
                        alert("删除成功");
                    } else {
                        alert("删除失败");
                    }
                })
            }
        },
        // 添加
        submit: function () {
            var _this = this;
            var msg="添加";
            if(_this.id){
                msg="编辑";
            }
            $.ajax({
                url: this.url + "saveUser",
                type: "put",
                contentType: 'application/json;charset=UTF-8', //请求头
                dataType: "json",
                data: JSON.stringify({
                    id: _this.id,
                    account: _this.account,
                    perName: _this.name,
                    citID: _this.citID,
                    sexCode: _this.sex,
                    role: _this.role,
                    email: _this.email,
                    mobile: _this.mobile,
                    department: _this.dep ? {id: _this.dep} : null,
                    useMark: _this.useMark
                })
            }).success(function (v) {
                // console.log(v);
                if (v.code === 0) {
                    layer.alert(msg+"成功!");
                    $(".list").fadeOut();
                    _this.getList();
                } else {
                    layer.alert(msg+"失败!");
                }
            })
        },
        //   编辑
        editme: function (id) {
            var _this = this;
            _this.init();
            $(".list").fadeIn();
            _this.getDepList();
            if (id) {
                _this.headtitle = "编辑";
                $.ajax({
                    url: _this.url + "getUserBySid",
                    type: "post",
                    dataType: "Json",
                    contentType: 'application/json;charset=UTF-8', //请求头
                    data: JSON.stringify({id: id})
                }).success(function (v) {
                    if (v.code === 0) {
                        console.log(v);
                        _this.id = v.data.id;
                        _this.account = v.data.account;
                        _this.name = v.data.perName;
                        _this.citID = v.data.citID;
                        _this.sex = v.data.sexCode;
                        _this.role = v.data.role;
                        _this.email = v.data.email;
                        _this.mobile = v.data.mobile;
                        _this.dep = v.data.department?v.data.department.id:null;
                        _this.useMark = v.data.useMark;
                    }
                })
            } else {
                _this.headtitle = "添加";
            }
        },
        // 获取部门下拉列表
        getDepList: function () {
            var _this = this;
            $.ajax({
                url: this.url + "getDepartmentSelect",
                dataType: "json",
                type: "get"
            }).success(function (v) {
                // console.log(v);
                if (v.code === 0) {
                    _this.depList = v.data;
                }
            })
        },
        // 关闭弹出框
        closeit: function () {
            $(".list").fadeOut();
        }
    },
    // 初始化 生命钩子,每个钩子都有对应触发的时间  详情阅读图片vue.jpg
    mounted: function () {
        this.getList();
    }
});